<template>
  <section class="single-service-area">
    <header class="header-area">
      <div class="main-header">
        <div class="container">
          <div class="row">
            <div class="col-lg-12" style="width: 100%;">
              <div
                class="main-header-item d-flex justify-content-between align-items-center"
              >
                <div class="main-header-menus  d-flex">
                  <div class="logo" style="height: 10px">
                    <a href="/"
                      ><img
                        style="height: 70px"
                        src="/assets/images/logo.png"
                        alt=""
                    /></a>
                  </div>

                  <div class="header-menu d-none d-lg-block">
                    <ul>
                      <li>
                        <a class="active" @click="$router.push('/')">首页</a>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/search')"
                          >信息智能处理</a
                        >
                        <ul class="sub-menu">
                          <li>
                            <nuxt-link to="/search">信息处理详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/single-service')"
                          >智能处理样理展示</a
                        >
                        <ul class="sub-menu">
                          <li>
                            <nuxt-link to="/single-service">样例展示</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/authors')"
                          >经典作者介紹</a
                        >
                        <ul class="sub-menu">
                          <li><nuxt-link to="/authors">作者介绍</nuxt-link></li>
                          <li>
                            <nuxt-link to="/single-author">作者详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/hist')"
                          >查看历史记录</a
                        >
                        <ul class="sub-menu">
                          <li><nuxt-link to="/hist">历史记录</nuxt-link></li>
                        </ul>
                      </li>
                      <li>
                        <a v-if="!username" @click="$router.push('login')"
                          >去登陆</a
                        >
                        <span v-else>{{ username }}</span>
                      </li>
                      <li>
                        <a v-if="username" @click="Esc()">退出</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-7 col-sm-9 order-lg-1 order-2">
          <div class="service-sidebar mt-30">
            <div class="service-sidebar-list">
              <ul>
                <li>
                  <nuxt-link to="/single-service-3">
                    郑伯克段于鄢-左丘明
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/single-service-4">
                    史记-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="">
                    三国志-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="">
                    资治通鉴-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/single-service">
                    赤壁赋-苏轼
                  </nuxt-link>
                </li>

                <li>
                  <nuxt-link to="/single-service-2">
                    上林赋-司马相如
                  </nuxt-link>
                </li>
              </ul>
            </div>
            <div class="service-sidebar-help"></div>
          </div>
        </div>
        <div class="col-lg-8 order-lg-2 order-1">
          <div class="single-project mt-30">
            <div class="single-project-thumb"></div>
            <div class="single-project-content">
              <h3 class="title">《郑伯克段于鄢》</h3>
              <p>
                初，郑武公娶于申，曰武姜。生庄公及共叔段。庄公寤生，惊姜氏，故名曰“寤生”，遂恶之。爱共叔段，欲立之，亟请于武公，公弗许。及庄公即位，为之请制。公曰：“制，岩邑也，虢叔死焉，佗邑唯命。”请京，使居之，谓之“京城大叔”。
                祭仲曰：“都城过百雉，国之害也。先王之制：大都，不过参国之一；中，五之一；小，九之一。今京不度，非制也，君将不堪。”公曰：“姜氏欲之，焉辟害？”对曰：“姜氏何厌之有？不如早为之所，无使滋蔓。蔓，难图也。蔓草犹不可除，况君之宠弟乎？”公曰：“多行不义，必自毙，子姑待之。”
                既而大叔命西鄙、北鄙贰于己。公子吕曰：“国不堪贰，君将若之何？欲与大叔，臣请事之；若弗与，则请除之，无生民心。”公曰：“无庸，将自及。”大叔又收贰以为己邑，至于廪延。子封曰：“可矣。厚将得众。”公曰：“不义不昵，厚将崩。”
                大叔完聚，缮甲兵，具卒乘，将袭郑。夫人将启之。公闻其期，曰：“可矣！”命子封帅车二百乘以伐京。京叛大叔段。段入于鄢“。公伐诸鄢。五月辛丑，大叔出奔共。
                书曰：“郑伯克段于鄢。”段不弟，故不言弟；如二君，故曰克；称郑伯，讥失教也；谓之郑志。不言出奔，难之也。
                遂置姜氏于城颍，而誓之曰：“不及黄泉，无相见也。”既而悔之。
                颍考叔为颍谷封人，闻之，有献于公。公赐之食。食舍肉。公问之，对曰：“小人有母，皆尝小人之食矣，未尝君之羹。请以遗之。”公曰：“尔有母遗，繄我独无！”颍考叔曰：“敢问何谓也？”公语之故，且告之悔。对曰：“君何患焉？若阙地及泉，隧而相见，其谁曰不然？”公从之。公入而赋：“大隧之中，其乐也融融！”姜出而赋：“大隧之外，其乐也洩洩！”遂为母子如初。
                君子曰：“颍考叔，纯孝也。爱其母，施及庄公。《诗》曰：‘孝子不匮，永锡尔类。’其是之谓乎？”
              </p>
            </div>
            <div class="row">
              <div class="col-lg-6 col-md-6"></div>
              <div class="col-lg-6 col-md-6"></div>
            </div>
            <div class="single-project-text">
              <a class="main-btn mt-55" href="#">下载</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  mounted() {
    let userName = JSON.parse(localStorage.getItem("user"));
    if (userName) {
      //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
      this.username = userName.username;
    }
  },
  methods: {
    Esc() {
      this.username = "";
      console.log("登出");
      localStorage.clear();

      this.$router.push("/");
    }
  },
  data() {
    return {
      username: "",
      title: "NLP | 左传"
    };
  }
};
</script>
